﻿<!DOCTYPE html>

<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>List</title>
    <link rel="stylesheet" href="~/css/font.css">
    <link rel="stylesheet" href="~/css/xadmin.css">
    @*<script src="~/jquery/dist/jquery.min.js"></script>*@
    <script src="~/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="~/js/xadmin.js"></script>
</head>
<body>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">订单管理</a>
            <a>
                <cite>订单管理</cite>
            </a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
    <div class="layui-fluid">
        @* 布局类 使用此类不会固定宽度，而是 100%自适应*@
        <div class="layui-row layui-col-space15">
            @* 设置行  列之间间隔 15px*@
            <div class="layui-col-md12">
                @* 设置列  12等分*@
                <div class="layui-card">
                    <div class="layui-card-body ">
                        @*卡片式面板面板通常用于非白色背景色的主体内*@
                        <div class="layui-col-space15">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" id="searchKeywork" name="keyword" placeholder="请输入产品型号名" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button type="button" class="layui-btn" id="searchbtn"><i class="layui-icon">&#xe615;</i>搜索</button>
                            </div>
                        </div>
                        <table class="layui-table" id="goodstypetablelist" lay-filter="goodstypetablelist"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="toolbar">
        @*<div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="open">
                    <i class="layui-icon">&#xe653;</i>开机
                </button>
                <button class="layui-btn layui-btn-sm" lay-event="close">
                    <i class="layui-icon">&#xe653;</i>关机
                </button>
            </div>*@
    </script>
    <script type="text/html" id="operation">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="log">关机记录</a>
        @*<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="open">开机</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="close">关机</a>*@
    </script>
    <script type="text/javascript">
        layui.use(['table'], function () {
            var table = layui.table;
			var options = {
                elem: '#goodstypetablelist'
                , method: 'post'
                , toolbar: '#toolbar'
                , height: 'full-170'
                , url: '@Url.Action("listasync", "business", new { my = 1})'
                , page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                }
                , limit: 20
                , limits: [20, 40, 60, 80, 100]
                , cols: [[
					//{ field: 'id', title: '编号', width: 80 },
                    { type: 'checkbox', width: 50},
					{ field: 'userName', title: '用户' },
					{ field: 'productName', title: '商品' },
					{ field: 'hashrate', title: '算力' },
					{ field: 'kwh', title: '功耗（kw/h）' },
					{ field: 'electricCharge', title: '电费（元）' },
                    { field: 'price', title: '单价（元）' },
					{ field: 'number', title: '数量' },
					{ field: 'amount', title: '金额（元）' },
					{ field: 'createdTime', title: '购买时间', width:100 },
					{ field: 'activationTime', title: '激活时间',width:100 },
					{ field: 'state', title: '状态' },
                    { fixed: '', title: '操作', width:120, toolbar: '#operation' }
                ]]
			};

			var goodstypeTable = table.render(options);

            //搜索事件
            $('#searchbtn').on('click', function () {
                tableReload();
            });

            //刷新表格数据
            var tableReload = function () {
				goodstypeTable.reload({
					where: {
						keyword: $('#searchKeywork').val().trim()
					},
					page: {
						curr: 1
					}
				});
            }
            //打开新窗口
            var openlayer = function (title, url, w, h, full) {
                if (title == null || title == '') {
                    var title = false;
                };
                if (url == null || url == '') {
                    var url = "404.html";
                };
                if (w == null || w == '') {
                    var w = ($(window).width() * 0.9);
                };
                if (h == null || h == '') {
                    var h = ($(window).height() - 50);
                };
                var index = layer.open({
                    type: 2,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: url,
                    end: function () {
                        tableReload();
                    }
                });
                if (full) {
                    layer.full(index);
                }
            }
			table.on('toolbar(goodstypetablelist)', function (obj) {
                var ids = '';
				var checkStatus = layui.table.checkStatus('goodstypetablelist').data;
				for (var i = 0; i < checkStatus.length; i++) {
					ids += ids != "" ? "," : "";
					ids += checkStatus[i].id;
				}
				if (ids == "") {
					layer.alert("请选择要操作的订单。", { icon: 5 });
					return;
				}

                switch (obj.event) {
					case 'open':
						openHandle(ids);
						break;
					case "close":
                        closeHandle(ids);
						break;
                };
            });
            table.on('tool(goodstypetablelist)', function (obj) {
				switch (obj.event) {
					case 'open':
						openHandle(obj.data.id);
						break;
					case 'close':
						closeHandle(obj.data.id);
						break;
					case "log":
                        openlayer('关机记录', '/business/closelogalert/?businessid=' + obj.data.id, 800, 550);
						break;
				}

                //if (obj.event === 'del') {
                //    delfunc(data);
                //} else if (obj.event === 'edit') {
                //    //编辑
                //    openlayer('修改商品', '/Product/ProductEdit/?id=' + data.id, 800, 550);
                //}
			});

			var openHandle = function (ids) {
                layer.confirm('确定开机吗？', function (index) {
                    $.ajax({
                        url: '@Url.Action("openhandleasync")',
						data: { ids: ids },
                        type: 'post',
                        datatype: 'json',
                        success: function (data) {
                            if (data.type == 200) {
                                var layindex = layer.alert(data.content, { icon: 6 }, function () {
                                    tableReload();
                                    layer.close(layindex);
                                });
                            } else {
                                layer.alert(data.content, { icon: 5 });
                            }
                        }
                    });
                });
			}

            var closeHandle = function (ids) {
                layer.confirm('确定关机吗？', function (index) {
                    $.ajax({
                        url: '@Url.Action("closehandleasync")',
						data: { ids: ids },
                        type: 'post',
                        datatype: 'json',
                        success: function (data) {
                            if (data.type == 200) {
                                var layindex = layer.alert(data.content, { icon: 6 }, function () {
                                    tableReload();
                                    layer.close(layindex);
                                });
                            } else {
                                layer.alert(data.content, { icon: 5 });
                            }
                        }
                    });
                });
			}
        });
    </script>
</body>
</html>
